how to make the map fit to web browser?
2,412 views
Skip to first unread message
khaledgm
Jun 17, 2010, 5:57:51 PM6/17/10
to Google Maps JavaScript API v3
Hi guys,
I am looking to add my map to browser with fitness facility, I mean
for example, if I resize the web browser, the map will fit to browser
upon resizing so always the map object should fill the browser.
so any idea guys how to do that?
Thanks...
I am looking to add my map to browser with fitness facility, I mean
for example, if I resize the web browser, the map will fit to browser
upon resizing so always the map object should fill the browser.
so any idea guys how to do that?
Thanks...
pete
Jun 17, 2010, 8:01:06 PM6/17/10
to Google Maps JavaScript API v3
Please see this example:
http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html
Basically, set the map DIV to width:100%; height:100%;
http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html
Basically, set the map DIV to width:100%; height:100%;
khaledgm
Jun 18, 2010, 5:46:00 AM6/18/10
to Google Maps JavaScript API v3
Thanks pete for response, I tried it, but I get nothing in web
browser!!
here is my code (ASP.NET 3.5):
**********************************************************
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="viewport" content="initial-scale=1.0, user-
scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/
>
<script type="text/javascript" src="http://maps.google.com/maps/api/
js?sensor=false"></script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<form id="form1" runat="server">
<script type="text/javascript">
//Map initializer
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
<div id="map_canvas" style="width:100%;height:100%"></div>
</form>
</body>
</html>
*********************************************************
The results:
[IMG]http://i47.tinypic.com/24gmuxz.jpg[/IMG]
http://i47.tinypic.com/24gmuxz.jpg
Thanks,
On Jun 18, 3:01 am, pete <petejun...@gmail.com> wrote:
> Please see this example:http://code.google.com/apis/maps/documentation/javascript/examples/ma...
browser!!
here is my code (ASP.NET 3.5):
**********************************************************
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="viewport" content="initial-scale=1.0, user-
scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/
>
<script type="text/javascript" src="http://maps.google.com/maps/api/
js?sensor=false"></script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<form id="form1" runat="server">
<script type="text/javascript">
//Map initializer
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
<div id="map_canvas" style="width:100%;height:100%"></div>
</form>
</body>
</html>
*********************************************************
The results:
[IMG]http://i47.tinypic.com/24gmuxz.jpg[/IMG]
http://i47.tinypic.com/24gmuxz.jpg
Thanks,
On Jun 18, 3:01 am, pete <petejun...@gmail.com> wrote:
> Please see this example:http://code.google.com/apis/maps/documentation/javascript/examples/ma...
Rossko
Jun 18, 2010, 6:17:51 AM6/18/10
to Google Maps JavaScript API v3
Your map div is sized at 100% of ... something unknown.
Try also sizing the <html> and <body> to 100%
Try also sizing the <html> and <body> to 100%
khaledgm
Jun 18, 2010, 7:08:02 AM6/18/10
to Google Maps JavaScript API v3
I tried it, unfortunately, nothing happened !!
The strange thing, it works in this HTML (non asp.net) code where no
set for width & height for html and body tags!! :
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
</html>
The strange thing, it works in this HTML (non asp.net) code where no
set for width & height for html and body tags!! :
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
}
var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Chad Killingsworth
Jun 18, 2010, 8:43:10 AM6/18/10
to Google Maps JavaScript API v3
That code does not contain a doctype and so the browser will render in
quirks mode. That's why the height:100% on the map div works.
To make this function with a doctype, add
<style type="text/css">
html, body {height: 100%}
</style>
to the head of your document.
Chad Killingsworth
quirks mode. That's why the height:100% on the map div works.
To make this function with a doctype, add
<style type="text/css">
html, body {height: 100%}
</style>
to the head of your document.
Chad Killingsworth
Rossko
Jun 18, 2010, 8:48:34 AM6/18/10
to Google Maps JavaScript API v3
> I tried it, unfortunately, nothing happened !!
The 100% <body> thing does work for other people. Example thread -
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/49cc3e330b0bafb2/64039dbf1f65734c
Perhaps you could porovide a link to your own page for accurate
diagnosis.
> The strange thing, it works in this HTML (non asp.net) code where no
> set for width & height for html and body tags!! :
the browser to render in quirks mode. You might find it works
differently in other browsers.
khaledgm
Jun 18, 2010, 9:48:08 AM6/18/10
to Google Maps JavaScript API v3
I have added it in head tag, but still not working !!!
as long as I am using telerik component for ajax and dhtml, I found
something strange after I viewed page source from internet explorer:
********************************************
Basic
</title><meta name="viewport" content="initial-scale=1.0, user-
html, body {height: 100%; width:100%}
</style>
<script type="text/javascript">
//Put your Java Script code here.
//Map initializer
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
<div>
<input type="hidden" name="RadScriptManager1_TSM"
id="RadScriptManager1_TSM" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /
>
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT"
value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/
wEPDwULLTE4NTgwNTQ5OTkPZBYCAgMPZBYCAgUPZBYCZg8UKwACDxYGHgtfIURhdGFCb3VuZGceE2NhY2hlZFNlbGVjdGVkVmFsdWVkHgdWaXNpYmxlaGQPFCsADhQrAAIPFgYeBFRleHQFBUJsYWNrHgVWYWx1ZQUFQmxhY2seCFNlbGVjdGVkaGRkFCsAAg8WBh8DBQdEZWZhdWx0HwQFB0RlZmF1bHQfBWhkZBQrAAIPFgYfAwUGRm9yZXN0HwQFBkZvcmVzdB8FaGRkFCsAAg8WBh8DBQNIYXkfBAUDSGF5HwVoZGQUKwACDxYGHwMFCk9mZmljZTIwMDcfBAUKT2ZmaWNlMjAwNx8FaGRkFCsAAg8WBh8DBQdPdXRsb29rHwQFB091dGxvb2sfBWhkZBQrAAIPFgYfAwUGU2ltcGxlHwQFBlNpbXBsZR8FaGRkFCsAAg8WBh8DBQpTaXRlZmluaXR5HwQFClNpdGVmaW5pdHkfBWhkZBQrAAIPFgYfAwUGU3Vuc2V0HwQFBlN1bnNldB8FaGRkFCsAAg8WBh8DBQdUZWxlcmlrHwQFB1RlbGVyaWsfBWhkZBQrAAIPFgYfAwUFVmlzdGEfBAUFVmlzdGEfBWhkZBQrAAIPFgYfAwUFV2ViMjAfBAUFV2ViMjAfBWdkZBQrAAIPFgYfAwUHV2ViQmx1ZR8EBQdXZWJCbHVlHwVoZGQUKwACDxYGHwMFCFdpbmRvd3M3HwQFCFdpbmRvd3M3HwVoZGQPFCsBDmZmZmZmZmZmZmZmZmZmFgEFd1RlbGVyaWsuV2ViLlVJLlJhZENvbWJvQm94SXRlbSwgVGVsZXJpay5XZWIuVUksIFZlcnNpb249MjAxMC4xLjMwOS4zNSwgQ3VsdHVyZT1uZXV0cmFsLCBQdWJsaWNLZXlUb2tlbj0xMjFmYWU3ODE2NWJhM2Q0FiBmDw8WBB4IQ3NzQ2xhc3MFCXJjYkhlYWRlch4EXyFTQgICZGQCAQ8PFgQfBgUJcmNiRm9vdGVyHwcCAmRkAgIPDxYGHwMFBUJsYWNrHwQFBUJsYWNrHwVoZGQCAw8PFgYfAwUHRGVmYXVsdB8EBQdEZWZhdWx0HwVoZGQCBA8PFgYfAwUGRm9yZXN0HwQFBkZvcmVzdB8FaGRkAgUPDxYGHwMFA0hheR8EBQNIYXkfBWhkZAIGDw8WBh8DBQpPZmZpY2UyMDA3HwQFCk9mZmljZTIwMDcfBWhkZAIHDw8WBh8DBQdPdXRsb29rHwQFB091dGxvb2sfBWhkZAIIDw8WBh8DBQZTaW1wbGUfBAUGU2ltcGxlHwVoZGQCCQ8PFgYfAwUKU2l0ZWZpbml0eR8EBQpTaXRlZmluaXR5HwVoZGQCCg8PFgYfAwUGU3Vuc2V0HwQFBlN1bnNldB8FaGRkAgsPDxYGHwMFB1RlbGVyaWsfBAUHVGVsZXJpax8FaGRkAgwPDxYGHwMFBVZpc3RhHwQFBVZpc3RhHwVoZGQCDQ8PFgYfAwUFV2ViMjAfBAUFV2ViMjAfBWdkZAIODw8WBh8DBQdXZWJCbHVlHwQFB1dlYkJsdWUfBWhkZAIPDw8WBh8DBQhXaW5kb3dzNx8EBQhXaW5kb3dzNx8FaGRkGAEFC1NraW5DaG9vc2VyDxQrAAJlBQVXZWIyMGSmMKsGL5b52jHXgC4KkcoJruAhow==" /
>
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/Basic/WebResource.axd?
d=vqCftXNLDraqliGOX12FkA2&t=633802765995006876" type="text/
javascript"></script>
<script src="/Basic/Telerik.Web.UI.WebResource.axd?
_TSM_HiddenField_=RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=
%3b%3bSystem.Web.Extensions%2c+Version%3d3.5.0.0%2c+Culture%3dneutral
%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US
%3ad0c4ca6e-6b5d-49b6-922d-5244924fb100%3aea597d4b
%3ab25378d2%3bTelerik.Web.UI%3aen-US%3a30afb63f-
e6ac-41db-9851-11879733de0a%3a16e4e7cd%3af7645509%3a22a6274a
%3aed16cbdc" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-
side framework failed to load.');
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('RadScriptManager1',
document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tRadAjaxManager1SU'],
[], [], 90);
//]]>
</script>
<!-- 2010.1.309.35 --><div id="RadAjaxManager1SU">
<span id="RadAjaxManager1" style="display:none;"></span>
</div>
<div id="map_canvas" style="width:100%;height:100%"></div>
<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(Telerik.Web.UI.RadAjaxManager,
{"_updatePanels":"","ajaxSettings":[],"clientEvents":
{OnRequestStart:"",OnResponseEnd:""},"defaultLoadingPanelID":"","enableAJAX":true,"enableHistory":false,"links":
[],"styles":[],"uniqueID":"RadAjaxManager1","updatePanelsRenderMode":
0}, null, null, $get("RadAjaxManager1"));
});
//]]>
</script>
</form>
</body>
</html>
********************************************
where the original asp.net code is:
********************************************
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Basic</title>
<telerik:RadStyleSheetManager id="RadStyleSheetManager1"
runat="server" />
html, body {height: 100%; width:100%}
</style>
<script type="text/javascript">
//Put your Java Script code here.
//Map initializer
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
<Scripts>
<%--Needed for JavaScript IntelliSense in VS2010--%>
<%--For VS2008 replace RadScriptManager with ScriptManager--%>
<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<telerik:RadSkinManager ID="RadSkinManager1" Runat="server"
Skin="Web20">
</telerik:RadSkinManager>
<div id="map_canvas" style="width:100%;height:100%"></div>
</form>
</body>
</html>
********************************************
I think asp.net engine creates div and other tags upon code
compilation to html, anyway to solve that?
On Jun 18, 3:43 pm, Chad Killingsworth
as long as I am using telerik component for ajax and dhtml, I found
something strange after I viewed page source from internet explorer:
********************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Basic
</title><meta name="viewport" content="initial-scale=1.0, user-
scalable=no" /><meta http-equiv="content-type" content="text/html;
charset=UTF-8" />
<style type="text/css">
charset=UTF-8" />
html, body {height: 100%; width:100%}
</style>
<script type="text/javascript">
//Put your Java Script code here.
//Map initializer
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<form name="form1" method="post" action="Default.aspx" id="form1">
};
var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div>
<input type="hidden" name="RadScriptManager1_TSM"
id="RadScriptManager1_TSM" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /
>
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT"
value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/
wEPDwULLTE4NTgwNTQ5OTkPZBYCAgMPZBYCAgUPZBYCZg8UKwACDxYGHgtfIURhdGFCb3VuZGceE2NhY2hlZFNlbGVjdGVkVmFsdWVkHgdWaXNpYmxlaGQPFCsADhQrAAIPFgYeBFRleHQFBUJsYWNrHgVWYWx1ZQUFQmxhY2seCFNlbGVjdGVkaGRkFCsAAg8WBh8DBQdEZWZhdWx0HwQFB0RlZmF1bHQfBWhkZBQrAAIPFgYfAwUGRm9yZXN0HwQFBkZvcmVzdB8FaGRkFCsAAg8WBh8DBQNIYXkfBAUDSGF5HwVoZGQUKwACDxYGHwMFCk9mZmljZTIwMDcfBAUKT2ZmaWNlMjAwNx8FaGRkFCsAAg8WBh8DBQdPdXRsb29rHwQFB091dGxvb2sfBWhkZBQrAAIPFgYfAwUGU2ltcGxlHwQFBlNpbXBsZR8FaGRkFCsAAg8WBh8DBQpTaXRlZmluaXR5HwQFClNpdGVmaW5pdHkfBWhkZBQrAAIPFgYfAwUGU3Vuc2V0HwQFBlN1bnNldB8FaGRkFCsAAg8WBh8DBQdUZWxlcmlrHwQFB1RlbGVyaWsfBWhkZBQrAAIPFgYfAwUFVmlzdGEfBAUFVmlzdGEfBWhkZBQrAAIPFgYfAwUFV2ViMjAfBAUFV2ViMjAfBWdkZBQrAAIPFgYfAwUHV2ViQmx1ZR8EBQdXZWJCbHVlHwVoZGQUKwACDxYGHwMFCFdpbmRvd3M3HwQFCFdpbmRvd3M3HwVoZGQPFCsBDmZmZmZmZmZmZmZmZmZmFgEFd1RlbGVyaWsuV2ViLlVJLlJhZENvbWJvQm94SXRlbSwgVGVsZXJpay5XZWIuVUksIFZlcnNpb249MjAxMC4xLjMwOS4zNSwgQ3VsdHVyZT1uZXV0cmFsLCBQdWJsaWNLZXlUb2tlbj0xMjFmYWU3ODE2NWJhM2Q0FiBmDw8WBB4IQ3NzQ2xhc3MFCXJjYkhlYWRlch4EXyFTQgICZGQCAQ8PFgQfBgUJcmNiRm9vdGVyHwcCAmRkAgIPDxYGHwMFBUJsYWNrHwQFBUJsYWNrHwVoZGQCAw8PFgYfAwUHRGVmYXVsdB8EBQdEZWZhdWx0HwVoZGQCBA8PFgYfAwUGRm9yZXN0HwQFBkZvcmVzdB8FaGRkAgUPDxYGHwMFA0hheR8EBQNIYXkfBWhkZAIGDw8WBh8DBQpPZmZpY2UyMDA3HwQFCk9mZmljZTIwMDcfBWhkZAIHDw8WBh8DBQdPdXRsb29rHwQFB091dGxvb2sfBWhkZAIIDw8WBh8DBQZTaW1wbGUfBAUGU2ltcGxlHwVoZGQCCQ8PFgYfAwUKU2l0ZWZpbml0eR8EBQpTaXRlZmluaXR5HwVoZGQCCg8PFgYfAwUGU3Vuc2V0HwQFBlN1bnNldB8FaGRkAgsPDxYGHwMFB1RlbGVyaWsfBAUHVGVsZXJpax8FaGRkAgwPDxYGHwMFBVZpc3RhHwQFBVZpc3RhHwVoZGQCDQ8PFgYfAwUFV2ViMjAfBAUFV2ViMjAfBWdkZAIODw8WBh8DBQdXZWJCbHVlHwQFB1dlYkJsdWUfBWhkZAIPDw8WBh8DBQhXaW5kb3dzNx8EBQhXaW5kb3dzNx8FaGRkGAEFC1NraW5DaG9vc2VyDxQrAAJlBQVXZWIyMGSmMKsGL5b52jHXgC4KkcoJruAhow==" /
>
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/Basic/WebResource.axd?
d=vqCftXNLDraqliGOX12FkA2&t=633802765995006876" type="text/
javascript"></script>
<script src="/Basic/Telerik.Web.UI.WebResource.axd?
_TSM_HiddenField_=RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=
%3b%3bSystem.Web.Extensions%2c+Version%3d3.5.0.0%2c+Culture%3dneutral
%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US
%3ad0c4ca6e-6b5d-49b6-922d-5244924fb100%3aea597d4b
%3ab25378d2%3bTelerik.Web.UI%3aen-US%3a30afb63f-
e6ac-41db-9851-11879733de0a%3a16e4e7cd%3af7645509%3a22a6274a
%3aed16cbdc" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-
side framework failed to load.');
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('RadScriptManager1',
document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tRadAjaxManager1SU'],
[], [], 90);
//]]>
</script>
<!-- 2010.1.309.35 --><div id="RadAjaxManager1SU">
<span id="RadAjaxManager1" style="display:none;"></span>
</div>
<div id="map_canvas" style="width:100%;height:100%"></div>
//<![CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(Telerik.Web.UI.RadAjaxManager,
{"_updatePanels":"","ajaxSettings":[],"clientEvents":
{OnRequestStart:"",OnResponseEnd:""},"defaultLoadingPanelID":"","enableAJAX":true,"enableHistory":false,"links":
[],"styles":[],"uniqueID":"RadAjaxManager1","updatePanelsRenderMode":
0}, null, null, $get("RadAjaxManager1"));
});
//]]>
</script>
</form>
</body>
</html>
********************************************
where the original asp.net code is:
********************************************
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<telerik:RadStyleSheetManager id="RadStyleSheetManager1"
runat="server" />
<meta name="viewport" content="initial-scale=1.0, user-
scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/
>
<style type="text/css">
scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/
>
html, body {height: 100%; width:100%}
</style>
<script type="text/javascript">
//Put your Java Script code here.
//Map initializer
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
};
var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<%--Needed for JavaScript IntelliSense in VS2010--%>
<%--For VS2008 replace RadScriptManager with ScriptManager--%>
<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<telerik:RadSkinManager ID="RadSkinManager1" Runat="server"
Skin="Web20">
</telerik:RadSkinManager>
<div id="map_canvas" style="width:100%;height:100%"></div>
</body>
</html>
********************************************
I think asp.net engine creates div and other tags upon code
compilation to html, anyway to solve that?
On Jun 18, 3:43 pm, Chad Killingsworth
Chad Killingsworth
Jun 18, 2010, 4:41:15 PM6/18/10
to Google Maps JavaScript API v3
This has nothing to do with the asp.net. The problem now is that your
map_canvas is nested inside the form tag so you'll need a height: 100%
for the form tag as well.
Chad Killingsworth
> wEPDwULLTE4NTgwNTQ5OTkPZBYCAgMPZBYCAgUPZBYCZg8UKwACDxYGHgtfIURhdGFCb3VuZGce E2NhY2hlZFNlbGVjdGVkVmFsdWVkHgdWaXNpYmxlaGQPFCsADhQrAAIPFgYeBFRleHQFBUJsYWN rHgVWYWx1ZQUFQmxhY2seCFNlbGVjdGVkaGRkFCsAAg8WBh8DBQdEZWZhdWx0HwQFB0RlZmF1bH QfBWhkZBQrAAIPFgYfAwUGRm9yZXN0HwQFBkZvcmVzdB8FaGRkFCsAAg8WBh8DBQNIYXkfBAUDS GF5HwVoZGQUKwACDxYGHwMFCk9mZmljZTIwMDcfBAUKT2ZmaWNlMjAwNx8FaGRkFCsAAg8WBh8D BQdPdXRsb29rHwQFB091dGxvb2sfBWhkZBQrAAIPFgYfAwUGU2ltcGxlHwQFBlNpbXBsZR8FaGR kFCsAAg8WBh8DBQpTaXRlZmluaXR5HwQFClNpdGVmaW5pdHkfBWhkZBQrAAIPFgYfAwUGU3Vuc2 V0HwQFBlN1bnNldB8FaGRkFCsAAg8WBh8DBQdUZWxlcmlrHwQFB1RlbGVyaWsfBWhkZBQrAAIPF gYfAwUFVmlzdGEfBAUFVmlzdGEfBWhkZBQrAAIPFgYfAwUFV2ViMjAfBAUFV2ViMjAfBWdkZBQr AAIPFgYfAwUHV2ViQmx1ZR8EBQdXZWJCbHVlHwVoZGQUKwACDxYGHwMFCFdpbmRvd3M3HwQFCFd pbmRvd3M3HwVoZGQPFCsBDmZmZmZmZmZmZmZmZmZmFgEFd1RlbGVyaWsuV2ViLlVJLlJhZENvbW JvQm94SXRlbSwgVGVsZXJpay5XZWIuVUksIFZlcnNpb249MjAxMC4xLjMwOS4zNSwgQ3VsdHVyZ T1uZXV0cmFsLCBQdWJsaWNLZXlUb2tlbj0xMjFmYWU3ODE2NWJhM2Q0FiBmDw8WBB4IQ3NzQ2xh c3MFCXJjYkhlYWRlch4EXyFTQgICZGQCAQ8PFgQfBgUJcmNiRm9vdGVyHwcCAmRkAgIPDxYGHwM FBUJsYWNrHwQFBUJsYWNrHwVoZGQCAw8PFgYfAwUHRGVmYXVsdB8EBQdEZWZhdWx0HwVoZGQCBA 8PFgYfAwUGRm9yZXN0HwQFBkZvcmVzdB8FaGRkAgUPDxYGHwMFA0hheR8EBQNIYXkfBWhkZAIGD w8WBh8DBQpPZmZpY2UyMDA3HwQFCk9mZmljZTIwMDcfBWhkZAIHDw8WBh8DBQdPdXRsb29rHwQF B091dGxvb2sfBWhkZAIIDw8WBh8DBQZTaW1wbGUfBAUGU2ltcGxlHwVoZGQCCQ8PFgYfAwUKU2l 0ZWZpbml0eR8EBQpTaXRlZmluaXR5HwVoZGQCCg8PFgYfAwUGU3Vuc2V0HwQFBlN1bnNldB8FaG RkAgsPDxYGHwMFB1RlbGVyaWsfBAUHVGVsZXJpax8FaGRkAgwPDxYGHwMFBVZpc3RhHwQFBVZpc 3RhHwVoZGQCDQ8PFgYfAwUFV2ViMjAfBAUFV2ViMjAfBWdkZAIODw8WBh8DBQdXZWJCbHVlHwQF B1dlYkJsdWUfBWhkZAIPDw8WBh8DBQhXaW5kb3dzNx8EBQhXaW5kb3dzNx8FaGRkGAEFC1NraW5 DaG9vc2VyDxQrAAJlBQVXZWIyMGSmMKsGL5b52jHXgC4KkcoJruAhow==" /
> Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tRadAjaxMan ager1SU'],
map_canvas is nested inside the form tag so you'll need a height: 100%
for the form tag as well.
Chad Killingsworth
khaledgm
Jun 18, 2010, 5:42:25 PM6/18/10
to Google Maps JavaScript API v3
Man, thank you very much, finally, it works
On Jun 18, 11:41 pm, Chad Killingsworth
> ...
>
> read more »- Hide quoted text -
>
> - Show quoted text -
On Jun 18, 11:41 pm, Chad Killingsworth
>
> read more »- Hide quoted text -
>
> - Show quoted text -
Al
Jun 18, 2010, 9:44:27 PM6/18/10
to Google Maps JavaScript API v3
Here is a URL which gets the page size on the initial load and on
resize and sets the map size accordingly. I got the code off of some
sample but I don't remember exactely where. I've used the height:100%
in the past but it doesn't seem real reliable. I never spent alot of
time to get it to work everywhere though.
http://m.vpike.com/?p=Pittsburgh+PA&submit=Map&r=b
-Al
resize and sets the map size accordingly. I got the code off of some
sample but I don't remember exactely where. I've used the height:100%
in the past but it doesn't seem real reliable. I never spent alot of
time to get it to work everywhere though.
http://m.vpike.com/?p=Pittsburgh+PA&submit=Map&r=b
-Al
Al
Jun 18, 2010, 9:50:40 PM6/18/10
to Google Maps JavaScript API v3
I noticed that I use both height:100% and the javascript code. Maybe
both are needed for reliable operation. I tested it with IE, Firefox,
Safari, and Chrome.
-Al
both are needed for reliable operation. I tested it with IE, Firefox,
Safari, and Chrome.
-Al
Reply all
Reply to author
Forward
0 new messages